<template>
    <view class="box-bg">
		<uni-nav-bar  color="#F7F7F7" left-icon="left" backgroundColor="#3485FD" height="65px" title="订单详情" @clickLeft="back" />
	</view>
	<view class="main1">
		<view class="main1-success">
			<view class="success">
				支付成功，请您前往指定门店消费
			</view>
			<view class="shop">
				<image src="/static/shangjiabai.png" mode="" class="house"></image>
				<view class="shopname">
					伟业汽车美容店（人民路店）
				</view>
			</view>
			<view class="local">
				山阳区人民中路33号
			</view>
		</view>
		<image src="/static/plane@2x.png" mode="" class="fly"></image>
	</view>
	<view class="main2">
		<uni-card class="main2-card">
			<view class="card-image-view">
				订单详情
			</view>
			<view class="main3">
				<view class="service-view">
					<view class="shop-name">
					    车辆清洗
					</view>	
					<view class="addres">
						￥39.90	
					</view>	
				</view>
				<view class="service-view">
					<view class="people-name-t">
					    车辆附加费用
					</view>
					<view class="yuanjia">
						0
					</view>
				</view>	
				<view class="service-view">
					<view class="car-name">
					    原价
					</view>
					<view class="yuanjia">
						￥59.90
					</view>
				</view>
				<view class="service-view">
					<view class="service">
					    店家优惠
					</view>
					<view class="price">
					    -￥20
					</view>
				</view>
				<view class="service-view">
					<view class="wash-car">
					    优惠券
					</view>
					<view class="price">
				        -￥10
					</view>
				</view>
				<view class="service-view" style="border-top: 6rpx solid #E5E5E5;padding-top: 36rpx">
					<view class="youhuiquan">
					    支付金额
					</view>
					<view class="number" style="color: green;">
						￥29.9
					</view>
				</view>
			</view>
	    </uni-card>
		<uni-card class="main2-card2">
			<view class="card-image-view">
				订单信息
			</view>
			<view class="main4">
				<view class="service-view">
					<view class="shop-name">
					    订单号：
					</view>	
					<view class="tel">
						121212112487878
					</view>	
				</view>
				<view class="service-view">
					<view class="people-name-t">
					    下单时间：
					</view>
					<view class="tel">
						2020.01.08 17:40
					</view>
				</view>
				<view class="service-view">
					<view class="wash-car">
					    车辆：
					</view>
					<view class="tel">
				        奔驰FWE4/豫A98FHJ
					</view>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
</script>

<style>
	.box-bg{
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 1000;
	}
	.main1{
		background-color: #1168EA;
		padding: 25rpx;
		padding-bottom: 140rpx;
		margin-top: 115rpx;
		height: 200rpx;
	}
	.main1-success{
		width: 90%;
		margin: auto;
		margin-top: 20rpx;
	}
	.shop{
		width: 500rpx;
		padding: 20rpx 0 10rpx 0;
	}
	.success,.shopname,.local{
		color: white;
	}
	.shopname{
		font-size: 35rpx;
	}
	.local{
		margin-left: 48rpx;
	}
	.main2{
		position: relative;
		top: -150rpx;
		padding-bottom:0rpx
	}
	.main3{
		margin-top: 50rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 500rpx;
		margin-bottom: 20rpx;
	}
	.main4{
		margin-top: 50rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 200rpx;
		margin-bottom: 20rpx;
	}
	.card-image-view{
		display: flex;
		padding: 10rpx 20rpx 15rpx 20rpx;
		border-bottom: 6rpx solid #E5E5E5;
		font-size: 30rpx;
		color: #000;
		font-weight: 600;
	}
	.shops,.shop,.pay,.num,.people-view,.car-view,.sm,.fuwu,.bot,.service-view,.service-view,.price-view,.pay-view,.people-name,.car{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.house{
		height: 35rpx;
		width: 35rpx;
	}
	.fly{
		height: 40rpx;
		width: 40rpx;
		position: relative;
		top: -50rpx;
		left: 90%
	}
	.shop-name,.people-name-t,.car-name,.service-view,.wash-car,.price,.pay{
		color: #000;
		font-size: 30rpx;
		font-weight: 400;
	}
	.tel{
		font-size: 30rpx;
		color: #BBB6B6;
	}
	.price-view{
		width: 220rpx;
	}
	.price{
		color: red;
	}
	.number{
		color: red;
	}
</style>